<template>
  <homeHeader2/>
  <div class="homePage">
    <div class="part1">
      <div class="box1">
      <span class="s1">
        PowerWave：Diagnostics and analysis solutions
      </span>
      </div >
      <div class="box2">
        <span style="font-size:17px;position: relative;top:-20px;">Welcome to indicator Diagram Troubleshooting, the ultimate destination for diagnosing and analyzing power diagram images and data, with machine management,
          fault diagnosis, statistical analysis, real-time monitoring and more, all in a cool blue-toned package.</span>
        <el-button type="primary" class="button2" @click="service">View all services</el-button>
      </div>
        <div class="photo1">
          <el-carousel height="400px;" :interval="2000">
            <el-carousel-item v-for="(item, index) in imageUrls" :key="index">
              <img :src="item" alt="轮播图照片" style="width:500px;height: 300px;border-radius: 10px; ">
              <h3 class="small">{{ index + 1 }}</h3>
            </el-carousel-item>
          </el-carousel>
      </div>
    </div>
    <div class="part2">
      <div class="part02">
        <span class="s3">
          Trusted by many engineering professionals
        </span>
        <div class="s4">
        </div>
        <div class="s5">
          <p>
            The site provides comprehensive diagnostic tools and analysis for power curve images and data, enabling users to easily manage, diagnose and analyze machine performance,
            while the blue color scheme adds a soothing and professional touch to the overall experience.
          </p>
          <img src="../assets/img/part22.png" alt="" style="width: 400px;height: 250px;
         position: relative;top:-150px;margin-left:140%;border-radius: 5px" >
        </div>
      </div>
    </div>
    <div class="part3">
      <div>
        <span class="s6">
          Our Services
        </span>
        <el-button type="primary" class="button3"  @click="service">View all services</el-button>
      </div>
      <div class="flex-container">
        <div class="flex-item">
          <img src="../assets/img/part301.png " alt="" class="part301" >
          <h4 class="part3-text">
            Fault Diagnosis
          </h4>
          <p class="s7">
            Users can use the csv file or indicator diagram file that is imported into the pc
            to carry out fault diagnosis, obtain the machine status and save it to the machine management page.
          </p>
          <router-link to='/discern2' class="link">Read more</router-link>
        </div>
        <div class="flex-item">
          <img src="../assets/img/part302.png " alt="" class="part301" >
          <h4 class="part3-text">
            Data Insights
          </h4>
          <p class="s7">
            Make statistical analysis of the data uploaded by users in the past month, and give suggestions.
          </p>
          <router-link to='/data2' class="link" tag="div" >Read more</router-link>
        </div>
        <div class="flex-item">
          <img src='../assets/img/part303.png ' alt="" class="part301" >
          <h4 class="part3-text">
            Machinery Management
          </h4>
          <p class="s7">
            Store the incoming data and the diagnostic results classified by the model and follow up the troubleshooting progress.
          </p>
          <router-link to='/manage2' tag="div" class="link">Read more</router-link>
        </div>
      </div>
    </div>
    <div class="part3-1">
      <img src="../assets/img/hr1.png" class="hr1" alt="" >
      <span class="s8">Features and Advantages</span>
      <img src="../assets/img/hr1.png" class="hr1" alt="" >
      <div class="advantage">
        <div class="box01">
              <span class="s9">
               Distinction
              </span>
          <div class="tb">
            <img  class="tb1" src="../assets/img/tb.png" alt="">
            <p class="s10">Computer Management page: Allows users to manage and track their computers, including adding
              new computers, editing computer details, and viewing computer status.</p>
          </div>
          <div class="tb">
            <img  class="tb1" src="../assets/img/tb.png" alt="">
            <p class="s10">Troubleshooting page: Analyze input power diagram images or Excel files,
              identify and diagnose faults, provide detailed results and troubleshooting recommendations.</p>
          </div>
          <div class="tb">
            <img  class="tb1" src="../assets/img/tb.png" alt="">
            <p class="s10">Statistical analysis page: Generates a variety of statistical analysis reports based on the collected data,
              such as monthly failure frequency, failure frequent machines and other related insights.</p>
          </div>
          <div class="tb">
            <img  class="tb1" src="../assets/img/tb.png" alt="">
            <p class="s10">Real-time monitoring page: Provides users with a real-time view of machine performance and status,
              including real-time power graphs, sensor readings, and any abnormal alerts.</p>
          </div>
          <div class="tb">
            <img  class="tb1" src="../assets/img/tb.png" alt="">
            <p class="s10">Database integration: Automatically stores and updates analyzed data into the database, allowing users to easily access
              and manage machine information on the machine management page.</p>
          </div>
        </div>
        <div class="box01">
              <span class="s9">
               Advantage
              </span>
          <div class="tb">
            <img  class="tb2" src="../assets/img/tb.png" alt="">
            <p class="s10">Convenient and user-friendly platform for diagnosing and analyzing power curve images and data</p>
          </div>
          <div class="tb">
            <img  class="tb2" src="../assets/img/tb.png" alt="">
            <p class="s10">Efficient machine management with dedicated pages to monitor and track machine performance.</p>
          </div>
          <div class="tb">
            <img  class="tb3" src="../assets/img/tb.png" alt="">
            <p class="s10">Accurate and timely fault diagnosis via dedicated pages.</p>
          </div>
          <div class="tb">
            <img  class="tb2" src="../assets/img/tb.png" alt="">
            <p class="s10">Detailed statistical analysis to identify trends and patterns of machine failure.</p>
          </div>
          <div class="tb">
            <img  class="tb3" src="../assets/img/tb.png" alt="">
            <p class="s10">Real-time monitoring to ensure timely detection and resolution of problems.</p>
          </div>

        </div>
        <div class="box01">
          <img src="../assets/img/part305.png" class="part305" alt="">
        </div>
      </div>
    </div>
    <div class="part4" >
      <span class="s11">Our team</span>
      <p class="s12">The Indicator Diagram Fault Diagnosis team is a group of technology enthusiasts who are passionate about developing a user-friendly web-based platform for diagnosing faults in dynamometer graphs and data, providing machine management, real-time monitoring and statistical
        analysis capabilities while maintaining a laid-back and informal approach.</p>
      <div class="part4-c">
        <span style="font-size:45px">
          Satisfied customer
        </span>
        <p class="s14">
          We provide an easy-to-use web platform for diagnosing and analyzing power graph images and data, providing fault results and real-time monitoring,
          all presented in a user-friendly interface with a cool blue color scheme.
        </p>
        <el-button type="primary" style="background-color: #0062cc;width: 200px;height: 60px;margin-top: 30px" @click="service">View all services</el-button>
      </div>
      <img src="../assets/img/part403.png" alt=""  class="part403" >
    </div>
  </div>
  <home-footer2/>
</template>

<script>
import homeHeader2 from "@/components/layout2/homeHeader2";
import homeFooter2 from "@/components/layout2/homeFooter2";

export default {
  name: "english",
  data() {
    return {
      imageUrls: [
        'https://ts3.cn.mm.bing.net/th?id=OIP-C.UmR2BiNAhzsi4gyRoLsebwHaEV&w=326&h=191&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2',
        'https://tse4-mm.cn.bing.net/th/id/OIP-C.lKOHUhTwyWHtBXQVIsEAmQHaKd?w=205&h=290&c=7&r=0&o=5&dpr=1.7&pid=1.7',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.XSogjO68-RV4p_V8L86AQQHaED?w=205&h=113&c=7&r=0&o=5&dpr=1.7&pid=1.7',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.odBAMO_fLbZ2X-xQFw0miAHaE8?w=266&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7'
      ]
    }
  },
  components:{
    homeHeader2,
    homeFooter2,
  },
  methods: {
    service() {
      this.$router.push('/service2')
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.part1{
  height: 420px;
  background-color:rgba(151, 171, 215, 0.12);
  padding-top: 60px;
  text-align: center ;
}
.part2{
  height: 350px;
  overflow: hidden;
}
.s1{
  font-size: 45px;
  font-weight: normal;
  width:100px;
  height: 100px;


}
.photo1{
  width:500px;
  height: 340px;
  position: absolute;
  right: 230px;
  top:150px;
}
.box1{
  width:550px;
  text-align: left ;
  position: absolute;
  left: 170px;
  top:180px;
}
.box2{
  margin-bottom: 30px;
  width: 500px;
  font-size: 10px;
  color: #515a6e;
  text-align: left ;
  position: absolute;
  left: 170px;
  top:350px;
}
.button2{
  position: absolute;
  top:100px;
  left: 10px;
  width: 140px;
  height: 55px;
  background-color: #0062cc;

}

.s3{
  font-size: 30px;
  font-weight:normal;
  margin-bottom: 20px;
}
.s4{
  color: #3A7734;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.s5{
  width: 500px;
  font-size: 15px;
  color: #515a6e;
}
.part02{
  width: 900px;
  margin-right: 0;
  margin-left: 170px;
  margin-top: 60px;
}
.part3{
  height: 700px;
  background-color:rgba(151, 171, 215, 0.12) ;
  margin-bottom: 0;

}
.part3-1{
  position: relative;
  top:-10%;
  background-color:rgba(151, 171, 215, 0.12) ;
  height: 880px;

}
.part3-text{
  font-weight: normal;
}
.part4{
  height: 600px;
  margin-left: 160px;
  margin-right: 160px;
  margin-top: 40px;
}
.s6{
  font-size: 40px;
  font-weight: normal;
  margin-left: 180px;
  position: relative;
  top:100px;
}
.button3{
  position: absolute;
  left: 73%;
  top:1000px;
  width: 140px;
  height: 55px;
  background-color: #0062cc;
}
.flex-container {
  height: 400px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 140px;
  clear:both;
}

.flex-item {
  width: 30%;
  height: 400px;
  margin: 15px;
  float: left;
}
.part301{
  width: 330px;
  height: 330px;
}
.s7{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
}
.link{
  color: #0062cc;
  position: relative;
  top:10px;
  font-size: 15px;
}
a{
  text-decoration: none;
}
.hr1{
  width: 35%;
  height: 20px;
  position: relative;
  left: 148px;
  top:20px;
  margin-left: 20px;

}
.s8{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
  left: 157px;
}
.advantage  {
  height: 250px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 50px;
}

.box01 {
  float: left;
  width: 29%;
  height: 400px;
  margin: 20px;
}
.tb{
  margin-right: 30px;
  position: relative;
  top:40px;
}
.tb1{
  width: 20px;
  height: 20px;
}
.tb2{
  width: 20px;
  height: 20px;
  position: relative;
  top:-10px;

}
.tb3 {
  width: 20px;
  height: 20px;
  position: relative;
  top: -20px;
}
.s9{
  font-size: 30px;
  font-weight: normal;
}
.s10{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  left: 30px;
  top:-50px;
  line-height: 25px;
}
.part305{
  width: 370px;
  height: 370px;
  border-radius: 10px;
}
.s11{
  font-size:45px;
}
.s12{
  font-size: 15px;
  line-height: 20px;
  color: #515a6e;
}
.part4-c{
  position: relative;
  top:100px;
  left:-5px;
}

.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part403{
  width: 540px;
  height: 400px;
  margin-left: 700px;
  position: relative;
  top:-200px;
  right: 100px;
  border-radius: 5px;
}
</style>